<template>
  <div class="GreetingCard1">
    <div class="part-bg">
      <img class="part-bg1" src="./img/a4.png" alt="" />
    </div>
    <div class="part1" :class="inputDoor === 1 ? 'part1-1' : ''">
      <div class="part11">
        <div class="part11Bg">
          <div class="part111">
            <input
              v-model="ddForm.secret"
              class="part111-i"
              @focus="inputOffset(1)"
              @blur="inputOffset(0)"
              type="text"
              placeholder-style="color: rgba(104,84,18,0.3);"
              placeholder="请输入单位名称"
            />
          </div>
          <div class="part111">
            <input
              v-model="ddForm.phone"
              class="part111-i"
              @focus="inputOffset(1)"
              @blur="inputOffset(0)"
              type="number"
              placeholder-style="color: rgba(104,84,18,0.3);"
              placeholder="请输入手机号码"
              :maxlength="11"
            />
          </div>
          <div class="part111">
            <input
              v-model="ddForm.code"
              class="part111-i"
              @focus="inputOffset(1)"
              @blur="inputOffset(0)"
              type="text"
              placeholder-style="color: rgba(104,84,18,0.3);"
              placeholder="请输入数字验证码"
              :maxlength="4"
              :disabled="!msgCodeImg"
              @keydown.enter="sendBtn"
            />
            <div class="part111-img" @click="sendCodeImg">
              <img width="100%" v-if="msgCodeImg" :src="msgCodeImg" alt="" />
              <u-loading-icon v-else size="25"></u-loading-icon>
            </div>
          </div>
          <div class="part112" @click="sendBtn">
            <u-loading-icon color="#fff" size="25" v-if="loading1"></u-loading-icon>
            <span class="part112-btn">立即抽奖</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="part2" @click="popBox1Btn">
      <span class="part21">规则</span>
    </div> -->

    <div class="popBox" @click="popBoxBtn" v-if="popBox">
      <popWrap ref="popWrap" @close="popBox = false">
        <div class="popBox1" v-if="popBoxType === 1">
          <div class="popBox11" @click.stop>
            <img width="100%" src="./img/a1.png" alt="" />
            <div class="popBox111">
              <p>
                1、活动期间登录云闪付APP，每天均可点>击首页签到动态图进入活动页面，点击“签到”领取红包，红包金额随机，最高88元。
              </p>
              <p>2、同一用户每天可签到领取1个红包。如当天未参与签，则无法领取当天的签到红包。</p>
              <p>3、用户须先注册云闪付APP，绑定本人银行卡并进行实名认证、银行卡开通在线支付，否则无法领取红包。</p>
            </div>
          </div>
          <img class="popBox12" @click="popBoxBtn" src="./img/a2.png" alt="" />
        </div>
        <div class="popBox2" @click.stop v-if="popBoxType === 2">
          <img width="100%" src="./img/a7.png" alt="" />
          <div class="popBox21">
            <p class="popBox213">获得{{ resMsg.money }}元立减金</p>
            <div class="popBox214">
              <!-- <span class="popBox2141">{{ resMsg.money * resMsg.sum }}</span
              >元 -->
            </div>
            <button class="popBox212" @click="popBoxBtn">我知道了</button>
          </div>
        </div>
        <div class="popBox2" @click.stop v-if="popBoxType === 3">
          <img width="100%" src="./img/a8.png" alt="" />
          <div class="popBox21">
            <p class="popBox211">{{ errMsg }}</p>
            <button class="popBox212" @click="popBoxBtn">好的</button>
          </div>
        </div>
        <div class="popBox2 popBox2A1" @click.stop v-if="popBoxType === 4">
          <img width="100%" src="./img/a12.png" alt="" />
          <div class="popBox21">
            <img class="popBox215" src="./img/a13.png" alt="" />
            <p class="popBox216 popBox2161">活动不在时间范围内</p>
            <p class="popBox2111">请于{{ errMsg1.start }} ~ {{ errMsg1.end }}参与活动</p>
          </div>
        </div>
        <div class="popBox2 popBox2A1" @click.stop v-if="popBoxType === 5">
          <img width="100%" src="./img/a12.png" alt="" />
          <div class="popBox21">
            <img class="popBox215" src="./img/a13.png" alt="" />
            <p class="popBox216 popBox2161">活动太火爆了，请稍后再试</p>
          </div>
        </div>
      </popWrap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ddForm: {},
      inputDoor: 0,
      popBox: false,
      loading1: false,
      popBoxType: 1,
      msgCodeImg: '',
      getMsgDoor: false,
      errMsg: '',
      errMsg1: {},
      resMsg: {
        money: 0,
        sum: 0,
      },
      timer1: null,
      timer2: null,
    }
  },
  mounted() {
    this.sendCodeImg()
  },
  methods: {
    popUpMsg(i, j) {
      this.popBoxType = i
      this.popBox = true
      if (i === 2) {
        this.resMsg = j
      } else if (i === 3) {
        this.errMsg = j
        // if (this.timer1) clearTimeout(this.timer1)
        // this.timer1 = setTimeout(() => {
        //   this.popBoxBtn()
        // }, 2000)
      } else if (i === 4) {
        this.errMsg1 = j || {
          start: '',
          end: '',
        }
      }
    },
    sendBtn() {
      if (!this.ddForm.phone) {
        uni.showToast({
          icon: 'error',
          title: '请输入手机号码',
        })
        return
      }
      let bb = this.ddForm.phone.match(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/g)
      if (!bb) {
        uni.showToast({
          icon: 'error',
          title: '手机号格式错误',
        })
        return
      }

      if (!this.ddForm.secret) {
        uni.showToast({
          icon: 'error',
          title: '请输入单位名称',
        })
        return
      }

      if (!this.ddForm.code) {
        uni.showToast({
          icon: 'error',
          title: '请输入验证码',
        })
        return
      }
      if (this.ddForm.code.length !== 4) {
        uni.showToast({
          icon: 'error',
          title: '验证码格式错误',
        })
        return
      }

      if (this.loading1) return
      this.loading1 = true

      this.ddForm.companyId = localStorage.companyId
      this.ddForm.openId = localStorage.user
      this.ddForm.secret = this.ddForm.secret.trim()
      // this.$parent.popUpMsg(this.ddForm)
      this.$api.szklhb
        .checkStatus(this.ddForm)
        .then(() => {
          this.$parent.popUpMsg(this.ddForm)
          this.loading1 = false
        })
        .catch((err) => {
          // this.sendCodeImg()
          this.loading1 = false
          this.popUpMsg(3, err.msg)
        })
      // this.$api.szklhb
      //   .getActivityMoney(this.ddForm)
      //   .then((res) => {
      //     this.$parent.popUpMsg(2, res.data && res.data.money)
      //     this.loading1 = false
      //   })
      //   .catch((err) => {
      //     this.sendCodeImg()
      //     this.loading1 = false
      //     this.popUpMsg(3, err.msg)
      //   })
    },
    inputOffset(i) {
      this.inputDoor = i
      this.$parent.tabBarShow = !i
    },
    popBox1Btn() {
      this.popUpMsg(1)
    },
    popBoxBtn() {
      if (this.popBoxType === 4) return
      this.$refs.popWrap.close()
    },
    sendCodeImg() {
      if (localStorage.companyId) {
        this.timeCheck1()
      }
    },
    sendCodeImg1() {
      this.ddForm.code = ''
      this.$api.szklhb
        .captchaImage()
        .then((res) => {
          this.msgCodeImg = 'data:image/gif;base64,' + res.img
          this.ddForm.key = res.uuid
        })
        .catch(() => {
          if (this.timer2) clearTimeout(this.timer2)
          this.timer2 = setTimeout(() => {
            this.sendCodeImg1()
          }, 2000)
        })
    },
    timeCheck1() {
      this.$api.szklhb
        .timeCheck({
          id: localStorage.companyId,
        })
        .then((res) => {
          let res1 = res.data

          let res11 = this.$moment(res1.startTime, 'MM/DD HH:mm:ss')
          let res12 = this.$moment(res1.finishTime, 'MM/DD HH:mm:ss')
          let res21 = parseInt(this.$moment(res1.startTime, 'YYYYMMDDHHmm'))
          let res22 = parseInt(this.$moment(res1.finishTime, 'YYYYMMDDHHmm'))
          let res23 = parseInt(this.$moment(new Date(), 'YYYYMMDDHHmm'))
          if (res23 > res22 || res23 < res21) {
            this.popUpMsg(4, {
              start: res11,
              end: res12,
            })
          } else {
            this.sendCodeImg1()
          }
        })
        .catch(() => {
          this.popUpMsg(5)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.GreetingCard1 {
  position: relative;
  .part-bg {
    font-size: 0;
    min-height: 100vh;
    background: url('./img/a6.png') 0 100% no-repeat;
    background-size: 100% 468rpx;
    background-color: #c7000b;
    .part-bg1 {
      width: 100%;
    }
  }
  .part1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.3s;
    padding-top: 47vh;
    .part11 {
      margin: 0 auto;
      width: 672rpx;
      background: linear-gradient(90deg, #fdf0b9 12%, #fcde7b 100%);
      border-radius: 16rpx;
      padding: 8rpx 9rpx;
    }
    .part11Bg {
      padding: 42rpx 31rpx 62rpx;
      background: url(./img/a9.png) no-repeat;
      background-size: 100% 100%;
      .part111 {
        display: flex;
        align-items: center;
        .part111-i {
          flex: 1;
          overflow: hidden;
          height: 90rpx;
          line-height: 90rpx;
          font-size: 30rpx;
          border-bottom: 1rpx solid rgba(104, 84, 18, 0.18);
        }
        .part111-t {
          color: #d1a31e;
          margin-left: 30rpx;
          font-size: 28rpx;
          line-height: 90rpx;
        }
        .part111-img {
          width: 274rpx;
          height: 90rpx;
          margin-left: 41rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .part112 {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 60rpx;
        height: 70rpx;
        padding-bottom: 10rpx;
        background: linear-gradient(180deg, #ff816c, #f33e21);
        border-radius: 40rpx;
        box-shadow: 0rpx -10rpx 0rpx 0rpx rgba(179, 35, 13, 0.44) inset;
        color: #fff;
        font-size: 30rpx;
        line-height: 30rpx;
      }
      .part112-btn {
        margin-left: 20rpx;
      }
    }
  }
  .part1-1 {
    padding-top: 40vh;
  }
  .part2 {
    position: fixed;
    top: 20%;
    right: 0;
    z-index: 10;
    width: 120rpx;
    height: 50rpx;
    border: 6rpx solid rgba(255, 255, 255, 0.7);
    border-right: 0;
    background: linear-gradient(120deg, #c27245 6%, #d77a46 43%, #c27245 91%);
    border-radius: 16rpx 0px 0px 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .part21 {
      color: #fff;
      font-size: 24rpx;
      line-height: 24rpx;
      display: inline-block;
      animation: scale1 infinite 2s;
    }
  }
  @keyframes scale1 {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  .popBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    .popBox1 {
      .popBox11 {
        width: 610rpx;
        position: relative;
        .popBox111 {
          position: absolute;
          width: 500rpx;
          top: 156rpx;
          left: 55rpx;
          font-size: 32rpx;
          color: #333;
          line-height: 44rpx;
        }
      }
      .popBox12 {
        width: 44rpx;
        height: 44rpx;
        display: block;
        margin: 0 auto;
        transform: translateY(-50rpx);
      }
    }
    .popBox2 {
      width: 502rpx;
      position: relative;
      .popBox21 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
      }
      .popBox211 {
        color: #fff;
        font-size: 32rpx;
        line-height: 32rpx;
        margin-top: 158rpx;
        margin-bottom: 84rpx;
      }
      .popBox2111 {
        color: #898b8d;
        font-size: 24rpx;
        line-height: 42rpx;
      }
      .popBox212 {
        border-radius: 40rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        color: #ce0611;
        background: #fff;
        width: 368rpx;
        margin: 0 auto;
      }
      .popBox213 {
        font-size: 28rpx;
        line-height: 28rpx;
        margin-top: 114rpx;
        margin-bottom: 70rpx;
        color: #fff;
      }
      .popBox214 {
        // color: #8c6700;
        // margin-bottom: 164rpx;
        // font-size: 28rpx;
        // line-height: 32rpx;
        height: 237rpx;
        .popBox2141 {
          font-size: 53rpx;
          line-height: 73rpx;
          padding: 0 15rpx;
        }
      }
      .popBox215 {
        width: 120rpx;
        height: 120rpx;
        margin-top: 141rpx;
        margin-bottom: 70rpx;
      }
      .popBox216 {
        font-size: 36rpx;
        line-height: 36rpx;
        color: #f34848;
        margin-bottom: 29rpx;
      }
      .popBox2161 {
        color: #ecc967;
      }
    }
    .popBox2A1 {
      width: 610rpx;
    }
  }
}
</style>
